<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-row label {
				width: 80px;
				padding: 10px 0 10px 15px;
			}
			
			.mui-input-row label~input {
				float: left !important;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			.mui-input-row label,
			.mui-input-row label~input,
			.mui-input-row label~input~button,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				margin-top: 4px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="logo">

					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<a id="head" class="mui-navigate-right">头像
								<span class=" head">
									<center><img class="head-img mui-action-preview" id="head-img" style="width: 120px; height: 120px;"/></center>
								</span>
							</a>
						</li>
					</ul>
				</div>

				<div class="mui-input-row">
					<label>手机号</label>
					<input id='phone' type="text" class="mui-input-clear mui-input" placeholder="请输入手机号" onBlur="checkPhoneNum()" style="width:140px ;" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
					<div id="phoneText" style="color: green;line-height: 50px;"></div>

				</div>

				<div class="mui-input-row">
					<label>密&nbsp;&nbsp;&nbsp;码</label>
					<input id='password' type="password" class="mui-input-password mui-input " placeholder="请输6-13位密码！" style="width:140px ;">
					<span id="passwordText" style="color: red;line-height: 45px;"></span>
				</div>
				<div class="mui-input-row">
					<label>确&nbsp;&nbsp;&nbsp;认</label>
					<input id='password2' type="password" class="mui-input-password mui-input " placeholder="请输入确认密码" onBlur="checkPassword()">
				</div>
				<div class="mui-input-row">
					<label>验证码</label>
					<input id='u_code' type="text" class=" mui-input" style="width:160px ;" placeholder="请输入验证码 ">
					<input type="button" id='get_code' class="mui-btn mui-btn-primary mui-btn-outlined"  value="获取" style="width: 100px; text-align: center;"></input>
				</div>

			</form>
			<div class="mui-content-padded">
				<button id='reg' class="mui-btn mui-btn-block mui-btn-primary" onclick="regSend()">注册</button>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/mui.view.js "></script>
		<script src='js/feedback.js'></script>
		<script>
			mui.init();
			var phoneObj = document.getElementById('phone');
			var pw = document.getElementById('password');
			var pw2 = document.getElementById('password2');
			var passwordText = document.getElementById("passwordText");
			var phoneText = document.getElementById("phoneText");
			var get_code = document.getElementById('get_code');
			var u_code = document.getElementById("u_code");
			//选择图片的数据
			var imgData = "";
			var imgData2 = "";
			var sendImgData = "";
			//验证码
			var phoneNum = "";
			//验证两次输入密码是否相同,是否为空
			function checkPassword() {
				  var reg = /^[A-Za-z0-9]{6,13}$/;   
				if(pw.value != "" && pw2.value != "") {
					if(pw.value != pw2.value) {
						

						passwordText.innerHTML = '两次密码不同';
						passwordText.style.color = 'red';

					}else if(pw.value.match(reg)&&pw2.value.match(reg)) {
						passwordText.innerHTML = '';
					}else{
						passwordText.innerHTML = '密码格式不符';
						passwordText.style.color = 'red';
				}
					
				}else{
						passwordText.innerHTML = '密码不能为空';
						passwordText.style.color = 'red';
				}
			}

			//验证手机号是否合法

			function checkPhoneNum() {
				var network = true;
				if(mui.os.plus) {
					mui.plusReady(function() {
						if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
							network = false;
						}
					});
				}
				if(network) {
					console.log('网络正常,正在发送请求...');
					if(phoneObj.value != "") {
						var p1 = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
						var me = false;
						if(p1.test(phoneObj.value)) me = true;
						if(!me) {
							//phoneObj.value='';  

							phoneText.innerHTML = '手机格式不符合';
							phoneText.style.color = 'red';
							//phoneObj.focus();  
							return false;
						} else {
							//phoneText.innerHTML = '手机格式符合';
							mui.ajax({
								type: "post",
								url: "http://113.71.26.27:8080/tpl/phone/checkPhoneNum",
								async: true,
								data: {
									loginName: phoneObj.value
								},
								dataType: "json",
								timeout: 3000,
								crossDomain: true,
								success: function(data) {
									console.log('响应成功！');
									console.log(data);
									var sure = JSON.stringify(data);
									if(sure == 'true') {

										phoneText.innerHTML = '手机号已存在';
										phoneText.style.color = 'red';

									} else {

										phoneText.innerHTML = '手机号可以使用';
										phoneText.style.color = 'green';
									}

								},
								error: function(xhr, type, errorThrown) {
									plus.nativeUI.toast(errorThrown);
									//alert(errorThrown);
								}
							});
						}
					} else {

						phoneText.innerHTML = '手机号不能为空';
						phoneText.style.color = 'red';
					}

				} else {
					mui.toast("当前网络不给力，请稍后再试...");
				}
			}

			//手机验证码
				var wait = 60;

				function time(o) {
					if(wait == 0) {
						o.removeAttribute("disabled");
						o.value = "获取";
						wait = 60;
					} else {

						o.setAttribute("disabled", true);
						o.value = "重新发送(" + wait + ")";
						wait--;
						setTimeout(function() {
								time(o)
							},
							1000)
					}
				}
				document.getElementById("get_code").onclick = function() {
					
					var network = true;
				if(mui.os.plus) {
					mui.plusReady(function() {
						if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
							network = false;
						}
					});
				}
				if(phoneObj.value != "") {

					if(network) {
						console.log('网络正常,正在发送请求...');
						
						time(this);
						mui.ajax({
							type: "post",
							url: "http://113.71.26.27:8080/tpl/phone/getPhoneMassage",
							async: true,
							data: {
								loginName: phoneObj.value
							},
							dataType: "json",
							timeout: 10000,
							crossDomain: true,
							success: function(data) {
								var sure = JSON.stringify(data);
								console.log(sure);
								if(sure != 'false') {
									plus.nativeUI.toast('验证码发送成功！', {
										verticalAlign: 'center'
									});
									phoneNum = sure;
									console.log(phoneNum);
								} else {
									plus.nativeUI.toast('验证码发送次数过多！', {
										verticalAlign: 'center'
									});
								}

								

							},
							error: function(xhr, type, errorThrown) {
								plus.nativeUI.toast(errorThrown);
								
							}
						});

					} else {
						mui.toast("当前网络不给力，请稍后再试...");
					}
				} else {
					plus.nativeUI.toast('输入不能为空！', {
						verticalAlign: 'center'
					});

				}
				}

			//注册按钮事件

			function regSend() {
			
				
				if(imgData == "") {
					sendImgData = imgData2;
					//console.log(sendImgData);
				} else {
					sendImgData = imgData;
					//console.log(sendImgData);
				}
				if(phoneObj.value != "" && pw.value != "" && pw2.value != "" && u_code.value != "" && sendImgData != "") {
					if(u_code.value == phoneNum) { //验证码相同

						var network = true;
						if(mui.os.plus) {
							mui.plusReady(function() {
								if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
									network = false;
								}
							});
						}
						if(network) {
							console.log('网络正常,正在发送请求...');

							//phoneText.innerHTML = '手机格式符合';
							mui.ajax({
								type: "post",
								url: "http://113.71.26.27:8080/tpl/phone/phoneReg",
								async: true,
								data: {
									loginName: phoneObj.value,
									password: pw.value,
									Data: sendImgData
								},
								dataType: "json",
								timeout: 5000,
								crossDomain: true,
								success: function(data) {
									console.log('响应成功！');
									console.log(data);
									var sure = JSON.stringify(data);
									if(sure == 'false') {
										alert("注册成功");
										plus.webview.currentWebview().hide();
										plus.webview.open('phoneLogin.html','phoneLogin.html');
										/*mui.openWindow({
											url: 'phoneLogin.html',
											id: 'phoneLogin.html',

										});*/
									} else if(sure == 'true') {
										alert('手机已存在');
										phoneText.style.color = 'red';
										phoneText.innerHTML = '手机已存在';

									} else {
										alert('注册失败');
									}
								},
								error: function(xhr, type, errorThrown) {
									plus.nativeUI.toast(errorThrown);
								}
							});

						} else {
							mui.toast("当前网络不给力，请稍后再试...");
						}
					} else {

						plus.nativeUI.toast('验证码出错！', {
							verticalAlign: 'center'
						});
					}

				} else {
					plus.nativeUI.toast('输入不能为空！', {
						verticalAlign: 'center'
					});

				}

			}

			/*点击头像触发*/
			document.getElementById('head').addEventListener('tap', function() {
				if(mui.os.plus) {
					var a = [{
						title: "拍照"
					}, {
						title: "从手机相册选择"
					}];
					plus.nativeUI.actionSheet({
						title: "选择用户头像",
						cancel: "取消",
						buttons: a
					}, function(b) { /*actionSheet 按钮点击事件*/
						switch(b.index) {
							case 0:
								break;
							case 1:
								getImage(); /*拍照*/
								break;
							case 2:
								galleryImg(); /*打开相册*/
								break;
							default:
								break;
						}
					})
				}
			}, false);

			//拍照 
			function getImage() {
				var c = plus.camera.getCamera();
				c.captureImage(function(e) {
					plus.io.resolveLocalFileSystemURL(e, function(entry) {
						var s = entry.toLocalURL() + "?version=" + new Date().getTime();
						document.getElementById("head-img").src = s;
						var image = new Image();
						image.src = s;
						image.onload = function() {
							imgData = getBase64Image(image);

						}
					}, function(e) {
						console.log("读取拍照文件错误：" + e.message);
					});
				}, function(s) {
					console.log("error" + s);
				}, {
					filename: "_doc/head.png"
				})
			}
			//本地相册选择 
			function galleryImg() {
				plus.gallery.pick(function(a) {
					plus.io.resolveLocalFileSystemURL(a, function(entry) {
						plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
							root.getFile("head.png", {}, function(file) {
								//文件已存在 
								file.remove(function() {
									console.log("file remove success");
									entry.copyTo(root, 'head.png', function(e) {
											var e = e.fullPath + "?version=" + new Date().getTime();
											document.getElementById("head-img").src = e;
											var image = new Image();
											image.src = e;
											image.onload = function() {
												imgData2 = getBase64Image(image);

											}
											
											
										},
										function(e) {
											console.log('copy image fail:' + e.message);
										});
								}, function() {
									console.log("delete image fail:" + e.message);
								});
							}, function() {
								//文件不存在 
								entry.copyTo(root, 'head.png', function(e) {
										var path = e.fullPath + "?version=" + new Date().getTime();
										document.getElementById("head-img").src = path;
										var image = new Image();
										image.src = path;
										image.onload = function() {
											imgData2 = getBase64Image(image);

										}
									},
									function(e) {
										console.log('copy image fail:' + e.message);
									});
							});
						}, function(e) {
							console.log("get _www folder fail");
						})
					}, function(e) {
						console.log("读取拍照文件错误：" + e.message);
					});
				}, function(a) {}, {
					filter: "image"
				})
			};

			//将图片压缩转成base64 
			function getBase64Image(img) {
				var canvas = document.createElement("canvas");
				var width = img.width;
				var height = img.height;
				// calculate the width and height, constraining the proportions 
				if(width > height) {
					if(width > 200) {
						height = Math.round(height *= 200 / width);
						width = 200;
					}
				} else {
					if(height > 200) {
						width = Math.round(width *= 200 / height);
						height = 200;
					}
				}
				canvas.width = width; /*设置新的图片的宽度*/
				canvas.height = height; /*设置新的图片的长度*/
				var ctx = canvas.getContext("2d");
				ctx.drawImage(img, 0, 0, width, height); /*绘图*/
				var dataURL = canvas.toDataURL("image/png", 0.8);
				return dataURL.replace("data:image/png;base64,", "");
			}
		</script>
	</body>

</html>